<template>
  <div class="payBalance">
    <CustomNavBar :title="t('Institutional Transfer')"> </CustomNavBar>
    <div class="container">
      <div class="head">
        <p class="text">{{t('Transfer Amount')}}</p>
        <p class="amount">{{ amount }}</p>
      </div>
      <div class="labelAmount">{{t('Preset Amount')}}</div>
      <div class="balance-container">
        <div class="balance-item" v-for="item in balanceTabs" :key="item.value" @click="changeTab(item.value)">₹{{
          item.label }}</div>
      </div>
    </div>
    <div class="btn">
      <van-button style="
          color: white;
          background: linear-gradient(
            to left,
            rgb(98, 247, 146),
            rgb(99, 253, 219)
          );
          width: 100%;
          border: 0px;
        " @click="handleSubmit">
        {{t('Institutional Transfer')}}
      </van-button>
    </div>
    <div class="btn">
      <button class="van-button van-button--primary van-button--normal van-button--block" style="
          color: white;
          background: rgb(50, 93, 121);
          border-color: rgb(50, 93, 121);
        " @click="goPayUsdt">
        <div class="van-button__content">
          <span class="van-button__text">
            {{t('USDT Institutional Transfer')}}</span>
        </div>
      </button>
    </div>
    <div class="card">
      <div class="title">{{t('Recharge Instructions')}}</div>
      <ul class="des">
        <li class="des-item">
          {{t('1. Deposit amount should be same as the payment amount. ')}}({{t('After recharging, upload the payment proof for bank verification')}})
        </li>
        <li class="des-item">
          {{t('2. Each time the organization cooperates with the bank, the minimum recharge amount is accepted ₹20,000.00 rupees.')}}
        </li>
        <li class="des-item">
         {{t('3. For your account and fund security, you need to enter the recharge page to complete each recharge, because the account provided by the organization is different each time.')}}
        </li>
        <li class="des-item">
          {{t('4. When recharging is not available, or any problem, please try to contact the organization commissioner')}}
        </li>
        <li class="des-item">
          {{t('5. Deposit hours are from 9:00 a.m. to 10:00 p.m.')}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { post } from '@/utils/request'
import { showSuccessToast, showLoadingToast, showFailToast } from 'vant'
import path from 'path';
import { t } from '@/languages'
const router = useRouter()

const amount = ref(50000)

const balanceTabs = [
  { label: '20,000.00', value: 20000 },
  { label: '50,000.00', value: 50000 },
  { label: '1,00,000.00', value: 100000 },
  { label: '5,00,000.00', value: 500000 },
  { label: '20,00,000.00', value: 2000000 },
  { label: '50,00,000.00', value: 5000000 },
]

function changeTab(value) {
  amount.value = value
}

function goPayUsdt() {
  router.push({
    path: '/payUsdt',
    query: { amount: amount.value }
  })
}


async function handleSubmit() {
  
  try {
    showLoadingToast()
    const res = await post(`/api/app/deposit/`, {
      amount: amount.value,
      type: 1
    })
    showSuccessToast(t('Payment Success'))

  } catch (error) {
    console.log(error)
    showFailToast(error.msg)
  } finally {
  }

}
</script>
<style lang="scss">
.payBalance .container {
  padding: 0.53333rem 0.4rem;
}

.payBalance .container .head {
  background: url("@/assets/images/Deposit-Records1_03.5fcda7da.png");
  background-size: 100% 100%;
  height: 15vh;
  text-align: center;
}

.payBalance .container .head .text {
  padding-top: 4vh;
  font-size: 0.37333rem;
  color: #f8b253;
}

.payBalance .container .head .amount {
  margin-top: 0.13333rem;
  font-size: 0.53333rem;
  color: #62f8a2;
  font-weight: 600;
}

.payBalance .container .labelAmount {
  color: #ccc;
  margin: 0.26667rem 0;
  margin-top: 0.8rem;
  font-size: 0.37333rem;
}

.payBalance .container .balance-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.payBalance .container .balance-container .balance-item {
  margin-top: 0.26667rem;
  padding: 0.53333rem 0.13333rem;
  width: 2.93333rem;
  text-align: center;
  font-size: 0.34667rem;
  border-radius: 0.16rem;
  background: #2693a1;
  border: 0.02667rem solid #507b97;
  color: #0e1822;
  font-weight: 700;
}

.payBalance .btn {
  margin-top: 0.53333rem;
  padding: 0 1.06667rem;
}

.payBalance .van-cell {
  padding: 0 0.26667rem;
  height: 1.33333rem;
  border-radius: 0.21333rem;
  background: #c1ecf2;
  border: 0.02667rem solid #507b97;
}

.payBalance .van-cell .amountIcon {
  width: 0.66667rem;
  height: 0.66667rem;
}

.payBalance .van-cell .van-field__body {
  height: 100%;
}

.payBalance .van-cell .van-field__control {
  padding-left: 0.26667rem;
  color: #000;
}

.payBalance .van-cell .van-field__control::placeholder {
  color: #6d6d6d;
}

.payBalance .card {
  margin-top: 0.53333rem;
  padding: 0.13333rem 0.26667rem;
  border-radius: 0.26667rem;
}

.payBalance .card .title {
  color: #fff;
  font-weight: 700;
  font-size: 0.37333rem;
}

.payBalance .card .des {
  padding-bottom: 0.8rem;
}

.payBalance .card .des .des-item {
  list-style-type: none;
  padding: 0.13333rem 0;
  font-size: 0.32rem;
}

.payBalance .van-button {
  border-radius: 0.66667rem;
  height: 1.06667rem;
}

.payBalance .van-button__text {
  color: #0d111a;
  font-weight: 600;
}
</style>
